<template>
  <div class="bill-header">
    <div class="bill-name">
        <span>我的账本</span>
    </div>
    <div class="bill-line-short"></div>
    <div class="bill-monthly">
      <div class="bill-monthly-content">
        <span>{{ currentMonth }}月收入</span>
        <span>{{ getMonthBillSummary(revenueType) }}</span>
      </div>
      <div class="bill-monthly-content">
        <div class="estimate-content">
          <span>{{ getEstimateType }}预算</span>
          <span title="">{{ getEstimateBalance }}</span>
          <div :style="getEstimateStyle" class="estimate-content-color"></div>
        </div>
      </div>
      <div class="bill-monthly-content">
        <span>{{ currentMonth }}月支出</span>
        <span>{{ getMonthBillSummary(expenseType) }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { UserModule, EstimateType } from '../../store/modules/user';
import { getDate, getMonth } from '../../utils/date';
import { BillModule, BillType } from '../../store/modules/bill';

@Component({
  name: 'BillHeader',
})
export default class extends Vue {
  // computed
  get currentMonth(): number {
    return new Date().getMonth() + 1;
  }
  get getMonthBillSummary() {
    return (type: BillType) => {
      const currentMonth = getMonth(new Date());
      const monthlyBillIndex = this.getMonthlyBillIndex(currentMonth);
      const currentSummary = BillModule.billSummary[monthlyBillIndex];
      let monthBillSummary = 0;
      if (monthlyBillIndex !== -1) {
        monthBillSummary = this.isRevenue(type) ? currentSummary.revenueSummary : currentSummary.expenseSummary;
      }
      return monthBillSummary;
    };
  }
  get getEstimateType(): string {
    switch (UserModule.userConfig.estimate.estimateType) {
      case EstimateType.Day:
        return '日';
      case EstimateType.Week:
        return '周';
      case EstimateType.Month:
      default:
        return '月';
    }
  }
  get getEstimateBalance() {
    let estimateBalance = 0;
    switch (UserModule.userConfig.estimate.estimateType) {
      case EstimateType.Day:
        const currentBillSummary = this.getDayBillSummary(new Date().getTime(), BillType.Expense);
        estimateBalance = this.getEstimateAmount() - currentBillSummary;
        break;
      case EstimateType.Month:
        estimateBalance = this.getEstimateAmount() - this.getMonthBillSummary(BillType.Expense);
        break;
    }
    return estimateBalance;
  }
  get getEstimateStyle() {
    const estimateHeight = `height:${this.getEstimateProportion() < 0 ? '5' : this.getEstimateProportion()}%;`;
    const estimateBgColor = `background-color:${this.getEstimateProportion() < 0 ? 'red' : '#409EFF'};`;
    return estimateHeight + estimateBgColor;
  }
  get revenueType(): BillType {
    return BillType.Revenue;
  }
  get expenseType(): BillType {
    return BillType.Expense;
  }
  get isRevenue() {
    return (billType: number): boolean => {
      return billType === BillType.Revenue;
    };
  }

  private isDayBillSummaryEixst(date: number, type: BillType) {
    const currentMonth = getMonth(new Date(date));
    const monthlyBillIndex = this.getMonthlyBillIndex(currentMonth);
    if (monthlyBillIndex === -1) {
      return false;
    } else {
      return this.getDayBillSummaryIndex(date, type) !== -1;
    }
  }
  private getDayBillSummary(date: number, type: BillType): number {
    if (!this.isDayBillSummaryEixst(date, type)) {
      return 0;
    }
    const currentMonth = getMonth(new Date(date));
    const monthlyBillIndex = this.getMonthlyBillIndex(currentMonth);
    const currentSummary = BillModule.billSummary[monthlyBillIndex];
    const dayBillSummaryIndex = this.getDayBillSummaryIndex(date, type);
    let dayBillSummary = 0;
    if (this.isRevenue(type)) {
      dayBillSummary = currentSummary.revenueBills[dayBillSummaryIndex].amount;
    } else {
      dayBillSummary = currentSummary.expenseBills[dayBillSummaryIndex].amount;
    }
    return dayBillSummary;
  }
  private getEstimateAmount(): number {
    return UserModule.userConfig.estimate.estimateAmount;
  }
  private getMonthlyBillIndex(currentMonth: string): number {
    const monthlyBillIndex = BillModule.billSummary.findIndex((item) => {
      return item.month === currentMonth;
    });
    return monthlyBillIndex;
  }
  private getDayBillSummaryIndex(date: number, type: BillType) {
    const currentMonth = getMonth(new Date(date));
    const currentDay = getDate(new Date(date));
    const monthlyBillIndex = this.getMonthlyBillIndex(currentMonth);
    const currentSummary = BillModule.billSummary[monthlyBillIndex];
    let dayBillIndex = -1;
    if (this.isRevenue(type)) {
      dayBillIndex = currentSummary.revenueBills.findIndex((item) => {
        return item.date === currentDay;
      });
    } else {
      dayBillIndex = currentSummary.expenseBills.findIndex((item) => {
        return item.date === currentDay;
      });
    }
    return dayBillIndex;
  }
  private getEstimateProportion() {
    let estimateProportion = 100;
    switch (UserModule.userConfig.estimate.estimateType) {
      case EstimateType.Day:
        const currentBillSummary = this.getDayBillSummary(new Date().getTime(), BillType.Expense);
        estimateProportion = (1 - ( currentBillSummary / this.getEstimateAmount())) * 100;
        break;
      case EstimateType.Month:
        estimateProportion = (1 - (this.getMonthBillSummary(BillType.Expense) / this.getEstimateAmount())) * 100;
        break;
    }
    return estimateProportion;
  }
}
</script>

<style scoped>
.bill-header, .bill-monthly, .bill-monthly-content, .estimate-content {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.bill, .bill-header, .estimate-content, .bill-monthly-content {
  flex-direction: column;
}
.bill, .bill-header, .bill-monthly {
  width: 100%;
}
.bill-name {
  padding-top: 30px;
  padding-bottom: 10px;
}
.bill-name span {
  padding: 7px 20px;
  border: 3px solid #C0C4CC;
  border-radius: 75px;
  color: #606266;
}
.bill-line-short{
  width: 0;
  border: 0.5px solid #D0CECF;
  background-color: #D0CECF;
  height: 60px;
  z-index: 999;
}
.bill-monthly-content {
  display: flex;
  flex: 1 1 33.33%;
  color: #606266;
}
.estimate-content {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #D0CECF;
  color: white;
  font-size: 30px;
}
.estimate-content:before {
  position: absolute;
  content: '';
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 30px solid white;
  z-index: 998;
}
.estimate-content span {
  z-index: 999;
}
.estimate-content-color {
  position: absolute;
  width: 150px;
  height: 150px;
  bottom: 0;
  z-index: 997;
}
</style>